<template>
  <div class="left_main flexC">
    <!-- <div class="flex textC" style="margin-bottom: -0.5rem;padding: 0 0.25rem;">
      <p class="Bold font_s18 colorF flex1 org_title">社会组织成立情况</p>
      <p class="Bold font_s18 colorF flex1 org_title2"> 社会组织注销情况</p>
    </div> -->
    <div class="flex textC cursor title">
      <p class="Bold font_s18 colorF flex1 " @click="categoryFun(1)" :class="{ category: category === 1 }">社会组织成立情况</p>
      <p class="Bold font_s18 colorF flex1 " @click="categoryFun(2)" :class="{ category: category === 2 }">社会组织注销情况</p>
    </div>

    <ul class="flex1 org_content colorF Bold font_s18" v-if="category === 1">
      <li class="flex">
        <p class="p_left">民非</p>
        <p>上海浦东新区周浦小雏鹰青少年服务中心</p>
      </li>
      <li class="flex">
        <p class="p_left">民非</p>
        <p>上海寅汇健康护理站</p>
      </li>
      <li class="flex">
        <p class="p_left">民非</p>
        <p>上海浦东新区北蔡社区长者照护之家</p>
      </li>
      <li class="flex">
        <p class="p_left">民非</p>
        <p>上海浦东新区社会信用促进中心</p>
      </li>
      <li class="flex">
        <p class="p_left">民非</p>
        <p>上海浦东新区涵瑄职业技能培训学校</p>
      </li>
      <li class="flex">
        <p class="p_left">民非</p>
        <p>上海浦东观窑瓷器艺术馆</p>
      </li>
      <li class="flex">
        <p class="p_left">民非</p>
        <p>上海烨霖智孝护理站</p>
      </li>
      <li class="flex">
        <p class="p_left1">社团</p>
        <p>上海市浦东新区航头镇商会</p>
      </li>
      <li class="flex">
        <p class="p_left1">社团</p>
        <p>上海市浦东新区宣桥社区社会组织联</p>
      </li>
    </ul>
    <ul class="flex1 org_content colorF Bold font_s18" v-if="category === 2">
      <li class="flex">
        <p class="p_left1">社团</p>
        <p>上海市浦东新区航头镇商会</p>
      </li>
      <li class="flex">
        <p class="p_left1">社团</p>
        <p>上海市浦东新区宣桥社区社会组织联</p>
      </li>
      <li class="flex">
        <p class="p_left">民非</p>
        <p>上海浦东新区周浦小雏鹰青少年服务中心</p>
      </li>
      <li class="flex">
        <p class="p_left">民非</p>
        <p>上海寅汇健康护理站</p>
      </li>
      <li class="flex">
        <p class="p_left">民非</p>
        <p>上海浦东新区北蔡社区长者照护之家</p>
      </li>
      <li class="flex">
        <p class="p_left">民非</p>
        <p>上海浦东新区社会信用促进中心</p>
      </li>
      <li class="flex">
        <p class="p_left">民非</p>
        <p>上海浦东新区涵瑄职业技能培训学校</p>
      </li>
      <li class="flex">
        <p class="p_left">民非</p>
        <p>上海浦东观窑瓷器艺术馆</p>
      </li>
      <li class="flex">
        <p class="p_left">民非</p>
        <p>上海烨霖智孝护理站</p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'OrgLeft',
  data () {
    return {
      category: 1
    }
  },
  mounted () {},
  methods: {
    categoryFun (index) {
      this.category = index
    }
  }
}
</script>
<style lang="scss" scoped>
.left_main {
  position: absolute;
  top: 15%;
  left: 1rem;
  height: 50%;
  width: 25%;
  /* .org_title{
    margin-right:-0.5rem;
    line-height: 2.5rem;
    background: url(../../assets/img/organization/13.png) no-repeat;
    background-size: 100% 100%;
  }
  .org_title2{
    margin-left:-0.5rem;
    line-height: 2.5rem;
    background: url(../../assets/img/organization/14.png) no-repeat;
    background-size: 100% 100%;
  } */
  .title {
    margin: 0rem 0.25rem -0.25rem 0.25rem;
    line-height: 2.5rem;
    background: url(../../assets/img/organization/24.png) no-repeat;
    background-size: 100% 100%;

    .category {
      background: url(../../assets/img/organization/23.png) no-repeat;
      background-size: 100% 100%;
    }
  }

  .org_content {
    line-height: 2.75rem;
    background: url(../../assets/img/organization/11.png) no-repeat;
    background-size: 100% 100%;
    li {
      margin: 0.5rem 0;
      .p_left {
        margin: 0 1rem;
        padding: 0 1rem;
        background: url(../../assets/img/organization/17.png) no-repeat;
        background-size: 100% 100%;
      }
      .p_left1 {
        margin: 0 1rem;
        padding: 0 1rem;
        background: url(../../assets/img/organization/18.png) no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}
</style>
